<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-button icon="el-icon-search" class="searchButton" @click="searchOrder()"></el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="showAddOrder">添加订单</el-button>
        </el-col>
      </el-row>

      <!-- 订单列表数据 -->
      <el-table :data="orderListData" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="订单编号" prop="id"></el-table-column>
        <el-table-column label="用户姓名" prop="userRealName"></el-table-column>
        <el-table-column label="电话号码" prop="userPhoneNumber"></el-table-column>
        <el-table-column label="收货地址" prop="address"></el-table-column>
        <el-table-column label="取件码" prop="pickupCode"></el-table-column>
        <el-table-column label="取件地址" prop="pickupAddress"></el-table-column>
        <el-table-column label="订单创建时间" prop="createTime"></el-table-column>
        <el-table-column label="订单状态" prop="status" width="140px">
          <template slot-scope="scope">
            <div>
              <el-tag type="info" v-if="scope.row.status === 0">未接单</el-tag>
              <el-tag v-if="scope.row.status === 1">正常派送</el-tag>
              <el-tag type="success" v-if="scope.row.status === 2">完成订单</el-tag>
            </div>
            <div class="worker"><el-tag v-if="scope.row.workId" @click="lookWorker(scope.row.workId)">查看代领人员信息</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">修改订单</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeAddressById(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 修改用户的对话框 -->
    <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="orderData" ref="editFormRef" label-width="100px">
        <el-form-item label="订单编号">
          <!-- disabled 用户名不可改 -->
          <el-input v-model="orderData.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="userRealName">
          <el-input v-model="orderData.userRealName"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="userPhoneNumber">
          <el-input v-model="orderData.userPhoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="orderData.address"></el-input>
        </el-form-item>
        <el-form-item label="取件码" prop="pickupCode">
          <el-input v-model="orderData.pickupCode"></el-input>
        </el-form-item>
        <el-form-item label="取件地址" prop="pickupAddress">
          <el-input v-model="orderData.pickupAddress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加订单的对话框 -->
    <el-dialog title="新增订单" :visible.sync="addOrderVisible" width="50%" @close="addAddressClosed">
      <el-form :model="orderData" ref="addOrderRef" label-width="100px">
        <el-form-item label="真实姓名" prop="userRealName">
          <el-input v-model="orderData.userRealName"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="userPhoneNumber">
          <el-input v-model="orderData.userPhoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="orderData.address"></el-input>
        </el-form-item>
        <el-form-item label="取件码" prop="pickupCode">
          <el-input v-model="orderData.pickupCode"></el-input>
        </el-form-item>
        <el-form-item label="取件地址" prop="pickupAddress">
          <el-select v-model="orderData.pickupAddress" style="width: 100%">
            <el-option v-for="(item, index) in addressList" :key="index" :label="item.address" :value="item.address"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="订单状态" prop="status">
          <el-select v-model="orderData.status" style="width: 100%">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrderVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrderInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 代领人员信息的对话框 -->
    <el-dialog title="代领人员信息" :visible.sync="workerInfoVisible">
      <!-- <el-table :data="workerInfo" border size="medium">
        <el-table-column property="id" label="代领人员编号"></el-table-column>
        <el-table-column property="username" label="昵称"></el-table-column>
        <el-table-column property="realName" label="姓名"></el-table-column>
        <el-table-column property="age" label="年龄"></el-table-column>
        <el-table-column property="sex" label="性别"></el-table-column>
        <el-table-column property="phoneNumber" label="联系方式"></el-table-column>
        <el-table-column property="idCard" label="订单编号"></el-table-column>
      </el-table> -->
      <el-form class="workerStyle" :model="workerInfo" label-position="left" ref="workerInfoRef" label-width="110px">
        <el-form-item label="代领人员编号：" prop="id">
          <div>{{workerInfo.id}}</div>
          <!-- <el-input v-model="workerInfo.id"></el-input> -->
        </el-form-item>
        <el-form-item label="昵称：" prop="username">
          <div>{{workerInfo.username}}</div>
          <!-- <el-input v-model="workerInfo.username"></el-input> -->
        </el-form-item>
        <el-form-item label="姓名：" prop="realName">
          <div>{{workerInfo.realName}}</div>
          <!-- <el-input v-model="workerInfo.realName"></el-input> -->
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <div>{{workerInfo.age}}</div>
          <!-- <el-input v-model="workerInfo.age"></el-input> -->
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <div>{{workerInfo.sex}}</div>
          <!-- <el-input v-model="workerInfo.sex"></el-input> -->
        </el-form-item>
        <el-form-item label="联系方式：" prop="phoneNumber">
          <div>{{workerInfo.phoneNumber}}</div>
          <!-- <el-input v-model="workerInfo.phoneNumber"></el-input> -->
        </el-form-item>
        <el-form-item label="订单编号：" prop="idCard">
          <div>{{workerInfo.idCard}}</div>
          <!-- <el-input v-model="workerInfo.idCard"></el-input> -->
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
      total: 0,
      orderlist: [],
      options: [
        {
          value: 0,
          label: '未接单',
        },
        {
          value: 1,
          label: '正常派送',
        },
        {
          value: 2,
          label: '完成订单'
        },
        {
          value: 3,
          label: '订单被取消',
        }
      ],
      value: '',
      orderInfo: {},
      orderListData: {},
      orderData: {},
      editDialogVisible: false,
      addOrderVisible: false,
      workerInfoVisible: false,
      addressList: {},
      workerInfo: {},
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      this.orderInfo.pageNo = this.queryInfo.pagenum
      this.orderInfo.pageSize = this.queryInfo.pagesize
      const { data: res } = await this.$http.post('orders', this.orderInfo)
      this.orderListData = res.data.result
      if (res.status !== 200) {
        return this.$message.error('获取订单列表失败！')
      }
      this.total = res.data.total
      this.orderlist = res.data.goods
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getOrderList()
    },
    // 按状态搜索
    async searchOrder() {
      this.orderInfo.status = this.value
      this.getOrderList()
    },
    // 展示修改用户地址的对话框
    async showEditDialog(id) {
      // this.orderListData.id = id
      const { data: res } = await this.$http.get(`order/${id}`)
      // this.orderListData = res.data
      if (res.status !== 200) {
        return this.$message.error('获取信息失败！')
      }
      this.orderData = res.data
      this.$message.success('获取信息成功！')
      this.editDialogVisible = true
    },
    // 删除地址信息
    async removeAddressById(row) {
      console.log('row', row.id)
      // 弹框提示用户是否要删除
      const confirmResult = await this.$confirm('此操作将永久删除该订单信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('取消了删除！')
      }
      const { data: res } = await this.$http.delete(`user/order/${row.id}`)

      if (res.status !== 200) {
        return this.$message.error('删除地址失败！')
      }
      this.getOrderList()
    },
    // 更新数据
    async editUserInfo() {
      const { data: res } = await this.$http.put('user/order', this.orderData)
      if (res.status !== 200) {
        return this.$message.error('更新数据失败！')
      }
      console.log('更新数据res', res)
      this.$message.success('更新数据成功！')
      this.editDialogVisible = false
      this.getOrderList()
    },
    showAddOrder() {
      this.addOrderVisible = true
    },
    // 添加用户信息
    async addOrderInfo() {
      const { data: res } = await this.$http.post('user/order', this.orderData)
      if (res.status !== 200) {
        return this.$message.error('添加用户信息失败！')
      }
      console.log('添加用户信息res', res)
      this.addOrderVisible = false
      this.getOrderList()
    },
    addAddressClosed() {
      this.$refs.addOrderRef.resetFields()
    },
    // 添加订单
    async showAddOrder() {
      const { data: res } = await this.$http.get('address')
      console.log('res.data.result', res.data.result)
      this.addressList = res.data.result
      this.addOrderVisible = true
    },
    // 查看代领人员信息
    async lookWorker(id) {
      const { data: res } = await this.$http.get(`work/${id}`)
      if (res.status !== 200) {
        this.$message.error('获取代领人员信息失败！')
      }
      this.workerInfo = res.data
      if(this.workerInfo.sex === 1) {
        this.$set(this.workerInfo,"sex","女")
      }else {
        this.$set(this.workerInfo,"sex","男")
      }
      // this.workerInfo.push(res.data)
      console.log('res', res)
      this.workerInfoVisible = true
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';

.el-cascader {
  width: 100%;
}
.searchButton {
  margin-left: 15px;
}
.worker {
  margin-top: 4px;
}
.workerStyle div{
  color: #80838b;
  margin-left: 40px;
  text-align: center;
}
</style>
